<template>
  <div class="user-detail">
    <div class="page-header">
      <h2>用户详情</h2>
      <div>
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
    </div>
    
    <el-card class="box-card">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="用户ID">{{userInfo.id}}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{userInfo.username}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{userInfo.email}}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{userInfo.createdAt}}</el-descriptions-item>
        <el-descriptions-item label="最后登录">{{userInfo.lastLogin}}</el-descriptions-item>
        <el-descriptions-item label="账户状态">
          <el-tag size="small" type="success" v-if="userInfo.status === 1">正常</el-tag>
          <el-tag size="small" type="danger" v-else>禁用</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="实名认证">
          <el-tag size="small" type="success" v-if="userInfo.isVerified">已认证</el-tag>
          <el-tag size="small" type="warning" v-else>未认证</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <el-card class="box-card" style="margin-top: 20px;">
      <div class="card-header">
        <div class="card-title">健康记录</div>
      </div>
      <div class="card-body">
        <el-tabs>
          <el-tab-pane label="体重记录">
            <el-empty description="暂无数据" v-if="!healthRecords.weight || healthRecords.weight.length === 0"></el-empty>
            <div v-else>
              <!-- 这里放置体重记录的图表或表格 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="血压记录">
            <el-empty description="暂无数据" v-if="!healthRecords.bloodPressure || healthRecords.bloodPressure.length === 0"></el-empty>
            <div v-else>
              <!-- 这里放置血压记录的图表或表格 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="运动记录">
            <el-empty description="暂无数据" v-if="!healthRecords.exercise || healthRecords.exercise.length === 0"></el-empty>
            <div v-else>
              <!-- 这里放置运动记录的图表或表格 -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    
    <el-card class="box-card" style="margin-top: 20px;">
      <div class="card-header">
        <div class="card-title">订单记录</div>
      </div>
      <div class="card-body">
        <el-table :data="orders" border style="width: 100%">
          <el-table-column prop="id" label="订单ID" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="amount" label="金额" width="120"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag size="small" type="success" v-if="scope.row.status === 'completed'">已完成</el-tag>
              <el-tag size="small" type="warning" v-else-if="scope.row.status === 'pending'">待付款</el-tag>
              <el-tag size="small" type="info" v-else>已取消</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="text" size="small" @click="viewOrder(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    return {
      router,
      route
    }
  },
  data() {
    return {
      userInfo: {
        id: 1001,
        username: 'user123',
        phone: '13800138000',
        email: 'example@mail.com',
        createdAt: '2023-01-01 12:00:00',
        lastLogin: '2023-11-20 18:30:00',
        status: 1,
        isVerified: false
      },
      healthRecords: {
        weight: [],
        bloodPressure: [],
        exercise: []
      },
      orders: [
        {
          id: 'O2023112001',
          createTime: '2023-11-20 09:15:32',
          productName: '智能手环',
          amount: '299.00',
          status: 'completed'
        },
        {
          id: 'O2023111501',
          createTime: '2023-11-15 14:30:45',
          productName: '运动套装',
          amount: '458.00',
          status: 'completed'
        },
        {
          id: 'O2023110801',
          createTime: '2023-11-08 11:05:22',
          productName: '蛋白粉',
          amount: '128.00',
          status: 'pending'
        }
      ]
    }
  },
  mounted() {
    // 根据路由参数获取用户ID
    // eslint-disable-next-line no-unused-vars
    const userId = this.route.params.id;
    // 这里可以添加根据用户ID获取详细数据的逻辑
  },
  methods: {
    goBack() {
      this.router.push('/admin/users');
    },
    handleEdit() {
      const userId = this.route.params.id;
      this.router.push(`/admin/user/edit/${userId}`);
    },
    viewOrder(order) {
      // 跳转到订单详情页面
      this.router.push(`/admin/order/${order.id}`);
    }
  }
}
</script>

<style scoped>
.user-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.card-body {
  min-height: 200px;
}
</style> 